<template>
  <view class="message-block">
    <view class="flex mb-30">
      <view class="tabs">
        <div
          @click="changeTab(index)"
          class="tab"
          :class="{ active: index === activeIndex }"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <text>{{ item.name }}</text>
        </div>
      </view>
    </view>
    <view class="tab-content">
      <view
        v-for="(item, index) in tabList"
        v-show="activeIndex === index"
        :key="index"
      >
        <view class="p-4 text-center">
          <block v-for="(item, ridx) in 5" :key="ridx">
            <MessageItem></MessageItem>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import MessageItem from "./item";

export default {
  components: {
    MessageItem,
  },
  data() {
    return {
      tabList: [{ name: "消息推送" }, { name: "错误信息" }],
      activeIndex: 0,
    };
  },

  computed: {},

  methods: {
    swiperChange(e) {
      let { current } = e.target;
      this.activeIndex = current;
    },
    changeTab(index) {
      this.activeIndex = index;
    },
  },

  onReady() {},
};
</script>
<style lang="scss" scoped>
div,
scroll-view,
swiper {
  box-sizing: border-box;
}

.message-block {
  background: #fff;
  padding: 30rpx;
  display: flex;
  width: 750rpx;
  flex-direction: column;
  .swiper {
    flex: 1;
    .swiper-item {
    }
  }
  .scroll {
    height: 950rpx;
  }

  .tabs {
    font-size: 30rpx;
    background: rgba(246, 249, 255, 1);
    box-shadow: 0px 3px 6px rgba(228, 232, 239, 1);
    border-radius: 999px;
    display: flex;
    width: fit-content;
    .tab {
      color: #808695;
      padding: 15rpx 25rpx;
      &.active {
        background-color: #0ac7b9;
        color: #fff;
        border-radius: 999px;
      }
    }
  }
}

.mb-30 {
  margin-bottom: 30rpx;
}
</style>
